<!doctype html>
<html data-debug>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fabulous Spring REST Todos</title>
    <link rel="stylesheet" charset="utf-8" href="base.css"/>
    <script src="bower_components/rave/rave.js"></script>
</head>
<body>

<section class="todo-app">
    <form class="create-todo" onsubmit="controller.add">
        <button type="button" class="toggle complete-all" onclick="controller.completeAll"></button>
        <input type="text" name="description" placeholder="Add a todo" autofocus/>
        <input name="complete" type="checkbox" disabled style="display: none"/>
        <fieldset>
            <button type="submit">&#65291;</button>
            <button type="button" onclick="controller.removeCompleted">&darr;</button>
        </fieldset>
    </form>

    <ul data-model="controller.todos" class="todo-list">
        <li data-list class="todo-item">
            <input type="hidden" name="id"/>
            <input class="toggle" type="checkbox" name="complete"/>
            <input type="text" name="description"/>
            <span class="remove" onclick="controller.remove">&times;</span>
        </li>
    </ul>

</section>

</body>
</html>